<template>
  <div id="body" class="bruce">
    <div class="header">
      <div>
        <p class="text">随机出题</p>
        <el-tooltip class="item" effect="dark" :content="isScreen ? '取消全屏' : '全屏'" placement="top-start">
          <i class="el-icon-full-screen"
            style="position: absolute;right: 100px;top: 50%;transform: translate(-50%,-50%);cursor: pointer;"
            @click="turnOff"></i>
        </el-tooltip>
      </div>
    </div>
    <ul class="bubble-bgwall">
      <li v-for="v in 10" :key="v">{{ v }}</li>
    </ul>
    <section style="height: calc(100vh - 300px);width:100%;position: absolute;top: 80px;">
      <el-container>
        <el-header>
          <el-row style="height: 100px;border: solid 2px #e3e3e3;">
            <el-col style="height: 100%;border-right: #e3e3e3 2px solid;" :span="4" class="flex">
              <h2 style="font-size: 35px;">答题情况</h2>
            </el-col>
            <el-col style="height: 100%;" :span="20">
              <div style="margin-top: 5px;height: 100%;width: 100%;" class="flex">
                <div style="margin: 0 5px;" v-for="(value, index) in proData" :key="index">
                  <el-button circle :type="(value.checked) ? 'success' : 'default'" size="default"
                    @click="clickNum(index)" style="width: 60px;height: 60px;"><span style="font-size: 20px">
                      {{ index + 1 }}
                    </span></el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-header>
        <el-main style="margin-top: 50px;">
          <el-row style="height: calc(100vh - 240px);border: solid 2px #e3e3e3;">
            <el-col style="height: 100%;border-right: #e3e3e3 2px solid;" :span="4" class="flex_s">
              <div style="flex: 1;border-bottom: #e3e3e3 2px solid;width: 100%;" class="flex_s">
                <h2 style="font-size: 35px;">抽中题号</h2>
                <p :style="{ color: rangeColor, 'font-size': '120px' }">{{ loading ? changeNum : curNum }}</p>
              </div>
              <div style="flex: 2;width: 100%;">
                <div style="height: 100%;width: 100%;justify-content: space-around;" class="flex_s">
                  <div style="margin-bottom: 25px;">
                    <el-button type="primary" @click="rande" style="height: 100px;width: 200px;font-size: 35px;"
                      :loading="loading">开始</el-button>
                  </div>
                  <el-button @click="stop" type="danger"
                    style="height: 100px;width: 200px;font-size: 35px;background-color: rgb(214, 40, 40);">结束</el-button>
                </div>
              </div>
            </el-col>
            <el-col style="height: 100%;" :span="20">
              <div
                style="padding: 25px;font-size: 55px;height: 100%;display: flex;flex-direction: column;box-sizing: border-box;">
                <div
                  style="width: 100%;overflow-wrap: break-word;word-wrap: break-word;height: 200px;font-weight: 600;">
                  {{ dataList.name }}</div>
                <div
                  style="display: flex;flex-direction: column;justify-content: space-around;height: calc(100% - 200px);box-sizing: border-box;">
                  <p v-for="(item, index) in dataList.select" :key="index" style="line-height: 65px;font-size:43px">{{
          item.option + "."
          + item.title }}</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </section>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      isScreen: false,
      changeNum: 0, //只是为了数字闪烁用
      proData: [],
      processNum: 0,
      loading: false,
      rangeColor: "",
      titleData: [],
      dataList: {},
      curNum: 0,
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    turnOff() {
      this.isScreen = !this.isScreen
      if (this.isScreen) {
        this.reqFullScreen()
      } else {
        this.exitFullScreen()
      }
    },
    // 进入全屏
    reqFullScreen(ele = document.documentElement) {
      const funName = [
        "requestFullscreen",
        "webkitRequestFullscreen",
        "mozRequestFullscreen",
        "msRequestFullscreen"
      ]
      const name = funName.find(name => name in ele)
      ele[name]()
    },
    // 退出全屏
    exitFullScreen() {
      if (document.documentElement.requestFullScreen) {
        document.exitFullScreen();
      } else if (document.documentElement.webkitRequestFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.documentElement.mozRequestFullScreen) {
        document.mozCancelFullScreen();
      }
    },
    init() {
      [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19].forEach(v => {
        this.proData.push({ num: v, checked: false })
      })
      this.titleData = [
        {
          name: "1.城市管理网格员职业技能共设（）个等级",
          id: 1,
          checked: false,
          select: [
            { option: "A", title: "三" },
            { option: "B", title: "四" },
            { option: "C", title: "五" },
            // { option: "D", title: "三" },
          ]
        },
        {
          name: "2.下列关于计算机信息系统的表述正确的是（）",
          id: 2,
          checked: false,
          select: [
            { option: "A", title: "由计算机及其相关的和配套的设备、设施(含网络)构成的" },
            { option: "B", title: "由计算机及其相关的和配套的设备、设施构成的" },
            { option: "C", title: "按照一定的应用目标和规则对信息进行采集、加工、存储、传输、检索等处理的人机系统" },
            { option: "D", title: "按照一定的应用目标和规则对信息进行采集、加工、存储、传输、检索等处理的系统" },
          ]
        },
        {
          name: "3.计算机信息系统安全保护主要包括_______。",
          id: 3,
          checked: false,
          select: [
            { option: "A", title: "保障计算机及其相关的和配套的设备、设施(含网络)的安全" },
            { option: "B", title: "运行环境的安全" },
            { option: "C", title: "保障信息的安全" },
            { option: "D", title: "保障计算机功能的正常发挥" },
          ]
        },
        {
          name: "4.下列对于城市网格员职业能力特征表述正确的是（）",
          id: 4,
          checked: false,
          select: [
            { option: "A", title: "具有学习、表达和计算能力" },
            { option: "B", title: "具有空间感、形体知觉和色觉" },
            { option: "C", title: "肢体灵活，动作协调" },
            { option: "D", title: "沟通交流能力、观察分析能力" },
          ]
        },
        {
          name: "5.下列关于单元网格表述错误的是（）",
          id: 5,
          checked: false,
          select: [
            { option: "A", title: "是数字化城市管理的基本监督和管理单元。" },
            { option: "B", title: "基于城市大比例尺基础地理数据，根据数字化城市管理工作的需要，按照规定的原则划分的、边界清晰的多边形区域。" },
            { option: "C", title: "单元网格划分原则有属地管理原则、面积适当原则、现状管理原则等。" },
            { option: "D", title: "一个单元网格可以有多个标识码。" },
          ]
        },
        {
          name: "6.部件是城市管理公共区域内的各项（）与（），包括公用设施、交通设施、市容环境设施、园林绿化设施和其他部件等。",
          id: 6,
          checked: false,
          select: [
            { option: "A", title: "市政工程设施" },
            { option: "B", title: "市政环境设施" },
            { option: "C", title: "市政公用设施" },
            { option: "D", title: "市政交通设施" },
          ]
        },
        {
          name: "7.专业部门是指部件和事件问题的（）",
          id: 7,
          checked: false,
          select: [
            { option: "A", title: "主管部门" },
            { option: "B", title: "部件的权属单位" },
            { option: "C", title: "采集部门" },
            { option: "D", title: "养护单位" },
          ]
        },
        {
          name: "8.下列属于部件小类的是（）",
          id: 8,
          checked: false,
          select: [
            { option: "A", title: "公共厕所" },
            { option: "B", title: "私搭乱建" },
            { option: "C", title: "店外经营" },
            { option: "D", title: "文物古迹" },
          ]
        },
        {
          name: "9.下列属于事件大类的是（）",
          id: 9,
          checked: false,
          select: [
            { option: "A", title: "市容环境" },
            { option: "B", title: "市容环境设施" },
            { option: "C", title: "街面秩序" },
            { option: "D", title: "交通设施" },
          ]
        },
        {
          name: "10.下列关于事件大小类表述错误的是（）",
          id: 10,
          checked: false,
          select: [
            { option: "A", title: "市容环境类，主要包括私搭乱建、违章接坡、建筑物不洁、暴露垃圾等" },
            { option: "B", title: "施工管理类，主要包括工地扬尘、施工废弃料、施工占道等" },
            { option: "C", title: "突发事件类，主要包括燃气管道破裂、路面塌陷、排水管道堵塞、街头座椅等" },
            { option: "D", title: "其他事件类，主要包括违规高空悬挂作业、临街屠宰等" },
          ]
        },
        {
          name: "11.兴趣点宜包含具有地理标识作用的（）。",
          id: 11,
          checked: false,
          select: [
            { option: "A", title: "建筑物、单位、店铺" },
            { option: "B", title: "车站、码头、广场" },
            { option: "C", title: "桥、碑、亭" },
            { option: "D", title: "雕塑、喷泉" },
          ]
        },
        {
          name: "12.关于数据采集区域类别划分正确的（）",
          id: 12,
          checked: false,
          select: [
            { option: "A", title: "一类区域：核心区、人流密集区、一般城区、重点街道" },
            { option: "B", title: "二类区域：商业区、旅游景区" },
            { option: "C", title: "三类区域：城乡结合部、拆迁区和权属未移交区等。" },
          ]
        },
        {
          name: "13.信息采集监督员是在责任网格内从事城市管理问题（）和案件核查等工作的人员",
          id: 13,
          checked: false,
          select: [
            { option: "A", title: "巡查" },
            { option: "B", title: "普查" },
            { option: "C", title: "上报" },
            { option: "D", title: "核实" },
          ]
        },
        {
          name: "14.监督员评价的规定指标应包括（）。",
          id: 14,
          checked: false,
          select: [
            { option: "A", title: "监督举报率" },
            { option: "B", title: "漏报率" },
            { option: "C", title: "按时核实率" },
            { option: "D", title: "按时核查率" },
          ]
        },
        {
          name: "15.下列表述错误的是（）",
          id: 15,
          checked: false,
          select: [
            { option: "A", title: "用人单位应当建立职业培训制度" },
            { option: "B", title: "用人单位按照国家规定提取和使用职业培训经费" },
            { option: "C", title: "根据本单位实际，有计划地对劳动者进行职业培训" },
            { option: "D", title: "从事技术工种的劳动者，上岗前可以不用经过培训" },
          ]
        },
        {
          name: "16.城乡网格化服务管理的网格内应当配备（）。",
          id: 16,
          checked: false,
          select: [
            { option: "A", title: "网格长" },
            { option: "B", title: "专职网格员" },
            { option: "C", title: "兼职网格员" },
            { option: "D", title: "社区志愿者" },
            { option: "E", title: "网格指导员" },
          ]
        },
        {
          name: "17.专项普查是根据监督中心的命令，在规定时间内对指定的管理部件、事件的现状或其他特定管理内容进行调查，并对相关信息收集、上报和核查的过程。",
          id: 17,
          checked: false,
          select: [
            { option: "A", title: "正确" },
            { option: "B", title: "错误" },
          ]
        },
        {
          name: "18.下列属于路灯小类立案条件与结案条件对应正确的（）",
          id: 18,
          checked: false,
          select: [
            { option: "A", title: "倾斜（有安全隐患）、倒伏—消除安全隐患并修复" },
            { option: "B", title: "外观不洁—清洁" },
            { option: "C", title: "长明—修复" },
            { option: "D", title: "破损、缺亮、缺失、倾斜—修复、拆除" },
          ]
        },
        {
          name: "19.下列大小类对应正确的是（）",
          id: 19,
          checked: false,
          select: [
            { option: "A", title: "公用设施—过街天桥" },
            { option: "B", title: "道路交通设施—自行车租赁点" },
            { option: "C", title: "市容环境—公共厕所" },
            { option: "D", title: "街面秩序—无证餐饮" },
          ]
        },
        {
          name: "20.下列哪些小类的结案条件是整改(   )",
          id: 20,
          checked: false,
          select: [
            { option: "A", title: "临街阳台脏乱差" },
            { option: "B", title: "积存垃圾渣土" },
            { option: "C", title: "交通标线不清晰" },
            { option: "D", title: "水域秩序问题" },
          ]
        },


        {
          name: "21.下列哪个（些）小类的结案条件是清除（）",
          id: 21,
          checked: false,
          select: [
            { option: "A", title: "地下通道" },
            { option: "B", title: "绿地护栏" },
            { option: "C", title: "擅自在临街的建筑物上挂彩旗" },
            { option: "D", title: "交通标志牌" },
          ]
        },
        {
          name: "22.道路交通设施大类包括（）",
          id: 22,
          checked: false,
          select: [
            { option: "A", title: "交通信号灯" },
            { option: "B", title: "充电桩" },
            { option: "C", title: "非机动车停放点" },
            { option: "D", title: "存车支架" },
          ]
        },
        {
          name: "23.暴露垃圾是指公共场所未倒入垃圾容器内的长时间堆积的建筑垃圾。",
          id: 23,
          checked: false,
          select: [
            { option: "A", title: "正确" },
            { option: "B", title: "错误" },
            // { option: "C", title: "非机动车停放点" },
            // { option: "D", title: "存车支架" },
          ]
        },
        {
          name: "24.以下属于街面秩序事件类的有（）",
          id: 24,
          checked: false,
          select: [
            { option: "A", title: "店外经营" },
            { option: "B", title: "机动车乱停放" },
            { option: "C", title: "无证餐饮" },
            { option: "D", title: "临街屠宰" },
          ]
        },
        {
          name: "25.外观不洁的消防设施（消防栓）可选处置时限有（）",
          id: 25,
          checked: false,
          select: [
            { option: "A", title: "4工作时" },
            { option: "B", title: "1工作日" },
            { option: "C", title: "2工作日" },
            { option: "D", title: "5工作日" },
          ]
        },
        {
          name: "26.下列小类名称与说明错误的是（）",
          id: 26,
          checked: false,
          select: [
            { option: "A", title: "通信井盖—通信运营商所设置的通信井盖" },
            { option: "B", title: "燃气井盖—标有煤、煤气、燃、天等字样的地下燃气管道的井盖" },
            { option: "C", title: "废弃车辆—在未经许可、未合法设置停车泊位的地点停放机动车辆" },
            { option: "D", title: "非法出版物销售—销售非法音像、图书等出版物的行为" },
          ]
        },
        {
          name: "27.监督员上报数是指监督举报的部件和事件问题数",
          id: 27,
          checked: false,
          select: [
            { option: "A", title: "对" },
            { option: "B", title: "错" },
          ]
        },
        {
          name: "28.监管信息采集设备是指供监督员使用，实现数字化城市管理监管信息的（）等任务的移动通信手持设备",
          id: 28,
          checked: false,
          select: [
            { option: "A", title: "采集" },
            { option: "B", title: "报送" },
            { option: "C", title: "核实" },
            { option: "D", title: "核查" },
          ]
        },
        {
          name: "29.下列关于人员巡查频度表述错误的是（）",
          id: 29,
          checked: false,
          select: [
            { option: "A", title: "城市核心区、人流密集区、主要商业区等每天不少于4次" },
            { option: "B", title: "一般城区、次干道每天不少于3次" },
            { option: "C", title: "城管问题高发区、重点街道、主要河道和重点旅游景区等每天不少于4次" },
            { option: "D", title: "背街小巷、城乡结合部、拆迁区域和管理权属未移交区域等每天不少于1次" },
          ]
        },
        {
          name: "30.下列属于雨水井盖小类结案条件的是（）",
          id: 30,
          checked: false,
          select: [
            { option: "A", title: "修复" },
            { option: "B", title: "清洁" },
            { option: "C", title: "清除" },
            { option: "D", title: "围护、修复" },
          ]
        },
        {
          name: "31.雨水箅子破损超过25平方厘米的可选处置时限有（）",
          id: 31,
          checked: false,
          select: [
            { option: "A", title: "4紧急工作时" },
            { option: "B", title: "2工作时" },
            { option: "C", title: "4工作时" },
            { option: "D", title: "6工作时" },
          ]
        },
        {
          name: "32.属于通信交接箱的立案条件的是（）",
          id: 32,
          checked: false,
          select: [
            { option: "A", title: "破损、倾斜、箱体锈蚀、门未关" },
            { option: "B", title: "破损、缺失、箱体锈蚀" },
            { option: "C", title: "不洁" },
            { option: "D", title: "外观不洁" },
          ]
        },
        {
          name: "33.属于电力设施结案条件的是（）",
          id: 33,
          checked: false,
          select: [
            { option: "A", title: "围护、修复" },
            { option: "B", title: "清洁" },
            { option: "C", title: "修复" },
            { option: "D", title: "清除" },
          ]
        },
        {
          name: "34.下列立案条件完全相同的小类是（）",
          id: 34,
          checked: false,
          select: [
            { option: "A", title: "售货亭" },
            { option: "B", title: "信息亭" },
            { option: "C", title: "报刊亭" },
            { option: "D", title: "电话亭" },
          ]
        },
        {
          name: "35.交通信号灯与交通信号设施的立案条件不同的有（）",
          id: 35,
          checked: false,
          select: [
            { option: "A", title: "破损、缺失、倾斜、锈蚀" },
            { option: "B", title: "故障、缺亮" },
            { option: "C", title: "外观不洁" },
          ]
        },
        {
          name: "36.户外广告的外观不洁可选处置时限有（）",
          id: 36,
          checked: false,
          select: [
            { option: "A", title: "4工作时" },
            { option: "B", title: "1工作日" },
            { option: "C", title: "2工作日" },
            { option: "D", title: "4工作日" },
          ]
        },
        {
          name: "37.下列属于店外经营可选处置时限的是（）",
          id: 37,
          checked: false,
          select: [
            { option: "A", title: "1工作时" },
            { option: "B", title: "2工作时" },
            { option: "C", title: "3工作时" },
            { option: "D", title: "5工作时" },
          ]
        },
        {
          name: "38.占道经营小类的结案条件是（）",
          id: 38,
          checked: false,
          select: [
            { option: "A", title: "制止" },
            { option: "B", title: "查处" },
            { option: "C", title: "制止并立案查处" },
            { option: "D", title: "恢复、立案查处" },
          ]
        },
        {
          name: "40.属于突发事件的小类是（）",
          id: 40,
          checked: false,
          select: [
            { option: "A", title: "道路积水" },
            { option: "B", title: "路面破损" },
            { option: "C", title: "施工扰民" },
            { option: "D", title: "街头散发广告" },
          ]
        },
      ]
    },
    // 点击题号
    clickNum(index) {
      // 当前答过的不能点击
      if (this.proData[index].checked == true) {
        return
      }
      if (index == 0) {
        this.$message({
          message: '请直接点击开始进行抽题！',
          type: 'warning'
        });
      } else {
        if (this.proData[index - 1].checked == false) {
          this.$message({
            message: '请按题号顺序答题！',
            type: 'warning'
          });
        } else {
          this.curNum = 0
          this.dataList = {}
        }
      }
    },
    stop() {
      if (this.time == null || this.processNum > 19) {
        return
      }
      cancelAnimationFrame(this.time);
      this.time = null
      this.dataList = this.titleData[this.curNum - 1]
      this.rangeColor = `rgb(0,0,0)`
      this.proData[this.processNum].checked = true
      this.processNum++
      this.loading = false
      this.noRepeat()
      // 结束后题号变成当前选中对象的id
      this.curNum = this.dataList.id
    },
    // 答过的题不再出现
    noRepeat() {
      this.titleData.splice(this.curNum - 1, 1)
    },
    rande() {
      if (this.processNum > 19) {
        this.$message({
          message: '答题已结束！',
          type: 'warning'
        });
        return
      }
      this.loading = true
      const handleNum = ()=> {
        {
          this.changeNum = Math.floor(Math.random() * 50) + 1
          this.curNum = Math.floor(Math.random() * this.titleData.length) + 1
          let r = Math.floor(Math.random() * 244) + 1
          let g = Math.floor(Math.random() * 244) + 1
          let b = Math.floor(Math.random() * 244) + 1
          this.rangeColor = `rgb(${r},${g},${b})`
          this.time = requestAnimationFrame(handleNum)
        }
      }
      handleNum()
    },
  },
};
</script>
<style scoped>
.flex_s {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

h2 {
  background: linear-gradient(to right, rgb(151, 14, 14), rgb(18, 54, 216));
  -webkit-background-clip: text;
  color: transparent;
}

.text {
  text-align: center;
  letter-spacing: 2px;
  animation: move 1s;
}

@keyframes move {
  from {
    letter-spacing: -50px;
    filter: blur(10px);
  }

  to {
    letter-spacing: 5px;
    filter: blur(2px);
  }
}

.header {
  position: relative;
  color: antiquewhite;
  background-color: #6990f6;
  /* background-image: linear-gradient(270deg, #8146b4, #6990f6); */
  text-align: center;
  width: 100%;
  padding: 12px;
  font-size: 30px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .72);
}

/* 答题序号 */
.answer-card-content {
  width: 320px;
  height: 100%;
  box-sizing: border-box;
  /* overflow-y: scroll; */
}

.answer-card-content .item {
  text-align: center;
  display: flex;
  align-content: flex-start;
  flex-flow: row wrap;
}

.answer-card-content .item .btn_box {
  flex: 0 0 20%;

}

.answer-card-content .item .btn_box button {
  margin-top: 10px;
  width: 50px;
  height: 50px;
  text-align: center;
}

/* 气泡背景 */

.bruce {
  height: 100vh;
  background-image: linear-gradient(270deg, skyblue, #a8b9eb);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.bubble-bgwall {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  padding: 0;
}

.bubble-bgwall li {
  display: flex;
  position: absolute;
  bottom: -200px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.15);
  color: #ccc;
  animation: bubble 15s infinite;
}

.bubble-bgwall li:nth-child(1) {
  left: 10%;
}

.bubble-bgwall li:nth-child(2) {
  left: 20%;
  width: 90px;
  height: 90px;
  animation-duration: 7s;
  animation-delay: 2s;
}

.bubble-bgwall li:nth-child(3) {
  left: 25%;
  animation-delay: 4s;
}

.bubble-bgwall li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.3);
  animation-duration: 8s;
}

.bubble-bgwall li:nth-child(5) {
  left: 70%;
}

.bubble-bgwall li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.2);
  animation-delay: 3s;
}

.bubble-bgwall li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  animation-delay: 2s;
}

.bubble-bgwall li:nth-child(8) {
  left: 55%;
  width: 40px;
  height: 40px;
  font-size: 12px;
  animation-duration: 15s;
  animation-delay: 4s;
}

.bubble-bgwall li:nth-child(9) {
  left: 25%;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  animation-duration: 12s;
  animation-delay: 2s;
}

@keyframes bubble {
  0% {
    opacity: 0.5;
    transform: translateY(0) rotate(45deg);
  }

  25% {
    opacity: 0.75;
    transform: translateY(-400px) rotate(90deg);
  }

  50% {
    opacity: 1;
    transform: translateY(-600px) rotate(135deg);
  }

  100% {
    opacity: 0;
    transform: translateY(-1000px) rotate(180deg);
  }
}
</style>